<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-query"></div>
        <div class="app-action">
          <el-button plain icon="plus" type="primary" @click="appHandleAdd()">添加</el-button>
        </div>
      </template>

      <el-table :data="appList" stripe style="width: 100%" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="分类名称" show-overflow-tooltip width="220">
          <template #default="scope">
            <i :class="scope.row.icon"></i>
            <span class="categoryName">{{ scope.row.categoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="rank" label="排序" show-overflow-tooltip></el-table-column>
        <el-table-column label="状态" show-overflow-tooltip>
          <template #default="scope">
            <el-switch :before-change="() => appHandleUpdate(scope.row, { isOpen: !scope.row.isOpen }, !isOpen ? '确认上线？' : '确认下线？', '已修改')" v-model="scope.row.isOpen"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" icon="plus" @click="appHandleAdd({ parentId: scope.row[appId] })">新增</el-button>
            <el-button link type="primary" icon="edit" @click="appHandleEdit(scope.row)">修改</el-button>
            <el-button link type="primary" icon="delete" @click="appHandleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <el-pagination @size-change="appHandleSizeChange" @current-change="appHandlePageChange" :current-page="appPage" :page-size="appPageSize" layout="total, sizes, prev, pager, next, jumper" :total="appTotal"></el-pagination>
    </template>

    <!-- 新增/编辑 内容 -->
    <app-dialog-edit width="500px" v-model="appShowDetail" :detail="appDetail" :json="detailJson" @change="appInit" />
  </app-page>
</template>

<script>
import { mixins } from 'jax-node'

export default {
  mixins: [mixins.pageList],
  components: {},
  data() {
    return {
      categoryList: [],
    }
  },
  computed: {
    detailJson() {
      const fixed = false
      const required = true
      const miniInput = { style: 'width:100px' }

      return [
        {
          name: 'rank',
          label: '序号',
          type: 'number',
          tips: '（序号越小越靠前）',
          inputAttr: miniInput,
        },
        {
          name: 'isOpen',
          label: '状态',
          type: 'switch',
        },
        {
          type: 'select',
          name: 'parentId',
          label: '上级分类',
          options: this.categoryList,
          placeholder: '选择上级分类',
        },
        {
          name: 'categoryName',
          label: '分类名称',
          required: true,
        },
        {
          name: 'desc',
          label: '描述',
          type: 'textarea',
          // inputAttr: {
          //   autosize: true,
          // },
        },
      ]
    },
  },
  methods: {
    appInit() {
      this.getTypeTree()
      this.getCategoryList()
    },
    // 获取分类树
    getTypeTree() {
      this.$http(`${this.appApi}/tree`, {
        params: {
          ...this.appQuery,
        },
      }).then((ret) => {
        this.appList = ret.data
      })
    },
    // 获取分类列表
    getCategoryList() {
      this.$http(this.appApi).then((res) => {
        this.categoryList = res.map((item) => {
          let prefix = ''
          if (item.index > 1) {
            prefix = '├' + '─'.repeat((item.index - 1) * 1)
          }
          return {
            ...item,
            label: prefix + item.categoryName,
            value: item[this.appId],
            index: item.index,
          }
        })
      })
    },
  },
}
</script>

<style lang="scss" scope>
.title {
  margin-left: 5px;
}
</style>
